<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- 积分抽奖记录 -->
      <span v-if="authorityHandle(97)" class="filter-title filter-item">身份所属</span>
      <k-select
        v-if="authorityHandle(97)"
        v-model="listQuery.userType"
        class="filter-item right-item"
        style="width:120px"
        :select-params="dict.type.IDENTITY_TYPE"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">礼品分类</span>
      <k-select
        v-model="listQuery.prizeTypeId"
        class="filter-item right-item"
        style="width:120px"
        :custom-params="{opations:prizeTypeList, label:'lineName',value:'lineId'}"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">抽奖通道</span>
      <k-select
        v-model="listQuery.probability"
        class="filter-item right-item"
        style="width:120px"
        :select-params="dict.type.LUCKY_TYPE"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">抽奖时间</span>
      <k-date-picker v-model="timeValue" class="filter-item right-item" @hqchang="handleFilter" />
      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="进行搜索"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>

    <!--表格相关 authorityHandle(208)-->
    <el-table
      ref="multipleTable"
      :data="listData"
      border
      fit
      :show-summary="authorityHandle(208)"
      :summary-method="getSummaries"
      highlight-current-row
      style="width: 100%; border-radius: 8px; margin-top: 30px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
      @sort-change="sortChange"
    >
      <el-table-column min-width="60px" type="index" label="序号" align="center" />
      <el-table-column prop="userName" min-width="100px" label="玩家用户名" align="center" />
      <el-table-column prop="userTypeName" min-width="100px" label="身份所属" align="center" />
      <el-table-column prop="consumePoint" min-width="100px" label="消耗积分" align="center" />
      <el-table-column v-if="authorityHandle(1)" prop="probabilityName" min-width="100px" label="抽奖通道" align="center" />
      <el-table-column v-if="authorityHandle(1)" prop="stageName" min-width="100px" label="抽奖阶段" align="center" />
      <el-table-column prop="prizeName" min-width="100px" label="礼品" align="center" />
      <el-table-column prop="prizePrice" min-width="100px" label="礼品价值" sortable="custom" align="center" />
      <el-table-column prop="typeName" min-width="100px" label="礼品分类" align="center" />
      <el-table-column prop="createTime" min-width="100px" label="抽奖时间" align="center" />
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { listPointOpenData, getPrizeTypeList } from '@/api/task/index'
import { taskSumPrice } from '@/api/data/data'

export default {
  name: 'Extension',
  components: { Pagination },
  dicts: ['LUCKY_TYPE', 'IDENTITY_TYPE'],
  data() {
    return {
      timeValue: '',
      listData: [],
      prizeTypeList: [],
      payAmount: 0,
      shareAmount: 0,
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        startTime: '', // 最终创建时间",
        endTime: '', // 最早支付时间",
        userType: '', // 最早支付时间",
        probability: '', // 最早支付时间",
        prizeTypeId: '', // 最早支付时间",
        key: '', // 饰品名称'
        consumePoint: null, //  消耗积分'
        prizePrice: null // 礼品价值'
      }
    }
  },
  watch: {
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    }
  },
  created() {
    this.loadData()
    this.getPrizeTypeList()
    this.tableDate()
  },
  methods: {
    /**
     * 合计
     * @param {obj} param
     * 包含列表查询参数  另外加 field参数   消耗积分 value：consume_point  礼品价值 value：prize_price
权限id：208
     */
    getSummaries(param) {
      const { columns } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) { // 第一列
          sums[index] = '总计'
        } else if (column.property === 'consumePoint') {
          sums[index] = ''
        } else if (column.property === 'prizePrice') {
          sums[index] = ''
        }
      })
      return sums
    },
    tableDate() {
      if (!this.authorityHandle(208)) return
      this.$nextTick(() => {
        const html3 = this.$refs.multipleTable.$refs.footerWrapper.querySelector('.el-table__footer')
          .querySelectorAll('td')[3]
          .querySelector('.cell')
        html3.innerHTML = `${this.consumePoint != null ? this.consumePoint : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html3.onclick = () => {
          taskSumPrice({ field: 'consume_point', ...this.listQuery }).then(res => {
            this.consumePoint = res.data
            this.tableDate()
          })
        }
        const html7 = this.$refs.multipleTable.$refs.footerWrapper.querySelector('.el-table__footer')
          .querySelectorAll('td')[this.authorityHandle(1) ? 7 : 5]
          .querySelector('.cell')
        html7.innerHTML = `${this.prizePrice != null ? this.prizePrice : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html7.onclick = () => {
          taskSumPrice({ field: 'prize_price', ...this.listQuery }).then(res => {
            this.prizePrice = res.data
            this.tableDate()
          })
        }
      })
    },
    sortChange(column, prop, order) {
      this.listQuery.sort = column.prop
      if (column.order === 'ascending') {
        this.listQuery.direction = 'asc'
      } else if (column.order === 'descending') {
        this.listQuery.direction = 'desc'
      }
      this.handleFilter()
    },
    getPrizeTypeList() {
      getPrizeTypeList().then(res => {
        this.prizeTypeList = res.data
      })
    },
    loadData() {
      listPointOpenData(this.listQuery).then(res => {
        const data = res.data
        this.listData = data.rows
        this.totalRows = data.totalRows
        if (this.consumePoint) {
          this.consumePoint = null
          this.tableDate()
        }
        if (this.prizePrice) {
          this.prizePrice = null
          this.tableDate()
        }
      })
    },
    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.loadData()
    }
  }
}
</script>

<style lang="scss" scoped>
    .filter-container {
      width: 100%;
      height: 48px;
      line-height: 48px;

      .filter-item {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 10px;
      }
      .right-item{
          margin-right: 10px;
        }
      .kInput {
        position: absolute;
        right: 20px;
      }

      .filter-title {
        height: 48px;
        line-height: 48px;
        font-size: 16px;
        font-weight: 500;
        margin-right: 22px;
        color: #14162E;
      }

      .user-item {
        margin-left: 10px;
        margin-right: 20px;
      }

      .user-status,
      .account-status {
        margin-right: 20px;
      }
    }

</style>
